<script setup>
import { ref,onMounted,computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
import router from "@/router/index.js";
import { useRoute } from 'vue-router'
const route = useRoute() 
const input = ref('')
const activeIndex = computed(() => {
  // 根据当前路由路径返回对应的 index
  switch (route.path) {
    case '/':
      return '1'
    case '/user':
      return '2-1'
    case '/shop/index':
      return '3'
    case '/login':
      return '2-2'
    default:
      return '1'
  }
}) // 默认激活第一个菜单项
const userStore=useUserStore();
const handleSelect = (key, keyPath) => {
  activeIndex.value = key; // 更新激活的菜单项
  console.log(key, keyPath);
}
const loginStatus = computed(() => {
  return Boolean(userStore.token)
})
/* 判断登录状态
*/
// const isLogin = () => {
//   loginStatus.value = Boolean(userStore.token)
// }
const logOut = async () => {
  await userStore.logOut()
  router.push('/')
  // loginStatus.value = false
}
// onMounted(() => {
//   isLogin()
// })
// 添加吸顶相关逻辑
const isFixed = ref(false)

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  isFixed.value = scrollTop > 0
}
</script>

<template>
  <el-menu :default-active="activeIndex" :class="['el-menu-demo', { 'is-fixed': isFixed }]"  mode="horizontal" :ellipsis="false"
    @select="handleSelect">
    <div class="logo">
      <img src="@/assets/微信图片_20241023174228.jpg" alt="Element logo">
    </div>
    <div class="flex-grow" />
    <el-menu-item index="1" @click="router.push('/')">首页</el-menu-item>
    <el-menu-item index="3" @click="router.push('/shop/index')">店铺信息</el-menu-item>
    <router-link to="/searchPage">
    <el-input v-model="input" style="max-width: 600px" placeholder="请输入内容" class="input-with-select">
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
    </router-link>
    <el-sub-menu index="2" v-show="loginStatus">
      <template #title>个人中心</template>
      <el-menu-item index="2-1" @click="router.push('/user')">个人中心</el-menu-item>
      <el-menu-item index="2-2" @click="logOut()">退出登录</el-menu-item>
      <!-- <el-menu-item index="2-3">item three</el-menu-item> -->
      <!-- <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-it0em index="2-4-3">item three</el-menu-it0em>
      </el-sub-menu> -->
    </el-sub-menu>
    <!-- <el-sub-menu index="2" v-if="!loginStatus"> -->
      <el-menu-item index="2-2" v-show="!loginStatus" @click="router.push('/login')">登录</el-menu-item> 
      <!-- <template #title @click="router.push('/login')">登录</template> -->
      <!-- <el-menu-item index="2-1" @click="router.push('/user')">个人中心</el-menu-item>
      <el-menu-item index="2-2">退出登录</el-menu-item> -->
      <!-- <el-menu-item index="2-3">item three</el-menu-item> -->
      <!-- <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu> -->
    <!-- </el-sub-menu> -->
  </el-menu>
</template>

<style>
.el-menu-demo {
  width: 100%;
  height: 70px;
  max-width: 100vw;
  box-sizing: border-box;
  z-index: 999;
  padding-bottom: 0;
  transition: all 0.3s ease-in-out;
}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.logo img {
  width: 200px;
  height: 70px;
}
</style>
